<template>
<div class="threemeal">
    

<div class="meal">
 <div class="meal_left">

     <div class="meal_left_top">
     <p> 漫花庄园门票+玻璃桥票+萌宠乐园 （不限人群票）,请至少当天的17点30分前购买 </p>
     </div>

    <div class="meal_left_body_left">
    <img src="https://p0.meituan.net/deal/06e66a128e814bfca1085eeeae7c360f776.png"><span>  随买随用 </span>
    </div>

   <div class="meal_left_body_right">
      <p> 有条件退 </p> 
     
   </div>

   <div class="meal_left_bottom"> 
    <p> 已售1000+ | 购买须知 &gt;</p>
   </div>
     
 </div>
 <div class="meal_right"> 

     <div class="meal_right_top">
          <span class="big-price">
             <span class="rem26">￥</span>74</span>
         <span class="small-price">￥128</span> 
    </div>

         <div class="meal_right_body"> 
             <button class="order-btn " type="button">在线预订</button>
         </div>
    
</div>
</div>





<div class="meal">
 <div class="meal_left">

     <div class="meal_left_top">
     <p> 漫花庄园门票大小同价,入园前均可购买 </p> 
     </div>

    <div class="meal_left_body_left">
    <img src="https://p0.meituan.net/deal/06e66a128e814bfca1085eeeae7c360f776.png"><span>  随买随用 </span>
    </div>

   <div class="meal_left_body_right">
      <p> 有条件退 </p> 
     
   </div>

    <div class="meal_left_body_right">
      <p> 官方 </p> 
     
   </div>






   <div class="meal_left_bottom"> 
    <p> 已售1000+ | 购买须知 &gt;</p>
   </div>
     
   



 </div>
 <div class="meal_right"> 

     <div class="meal_right_top">
          <span class="big-price">
             <span class="rem26">￥</span>35</span>
         <span class="small-price">￥128</span> 
    </div>

         <div class="meal_right_body"> 
             <button class="order-btn " type="button">在线预订</button>
         </div>
    
</div>
</div>




<div class="meal">
 <div class="meal_left">

     <div class="meal_left_top">
     <p> 漫花庄园门票+玻璃桥套票大（大小同价，含萌宠乐园）,入园前均可购买 </p> 
     </div>

    <div class="meal_left_body_left">
    <img src="https://p0.meituan.net/deal/06e66a128e814bfca1085eeeae7c360f776.png"><span>  随买随用 </span>
    </div>

   <div class="meal_left_body_right">
      <p> 有条件退 </p> 
     
   </div>

  <div class="meal_left_body_right">
      <p> 官方 </p> 
     
   </div>





   <div class="meal_left_bottom"> 
    <p> 已售1000+ | 购买须知 &gt;</p>
   </div>
     
 </div>
 <div class="meal_right"> 

     <div class="meal_right_top">
          <span class="big-price">
             <span class="rem26">￥</span>73</span>
         <span class="small-price">￥98</span> 
    </div>

         <div class="meal_right_body"> 
             <button class="order-btn " type="button">在线预订</button>
         </div>
    
</div>
</div>







</div>

</template>






<style scoped>


.meal{
    height: 100px;
    
    position: relative;
    padding: .16rem .2rem;
    min-height: 0.86rem;
    border-bottom: 1px solid #e5e5e5;
    background-color: #fff;
    color: #333;
    vertical-align: middle;
    margin-left: 0px;
    margin-right: 0px;
    text-align: left;
    overflow: inherit;
    display: -webkit-box;
    display: -webkit-flex;
    display: box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    box-align: center;
    align-items: center;
}

   

.meal_left {
    width: 5rem;
    height: 100px;
    float: left;
}
.meal_right{
     width: 2.7rem;
     float: right;
    

   
    
}
.meal_left_top{
   
    -webkit-line-clamp: 2;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
}
.meal_left_top p{
    font-size: 0.32rem;
    color: #333;
    margin-left: 5px;
    margin-bottom: 5px;
   
}
.meal_left_body_left img{
   
    margin-right: 0.06rem;
    line-height: 0.3rem;
    height: 0.3rem;
    font-size: 0.25rem;
    position: relative;
    float: left;
     margin-left: 15px;
    
   

}
.meal_left_body_left span{
    float: left;
    font-size: 0.24rem;
     display: inline-block;
    padding: 0 .08rem;
    border: 1px solid;
    border-radius: .02rem;
    text-align: center;
    font-size: 0.22rem;
    white-space: nowrap;
    background-color: #fff;
    color:#3ea6f9;
}
.meal_left_body_right p{
    float: left;
    margin-left: 10px;
    font-size: 0.24rem;
     display: inline-block;
    padding: 0 .08rem;
    border: 1px solid;
    border-radius: .02rem;
    text-align: center;
    font-size: 0.22rem;
    white-space: nowrap;
    background-color: #fff;
    color:#3ea6f9;
   
}
.meal_left_bottom p{
   
    font-size: 0.3rem;
    color: #999;
    height: 0.4rem;
    line-height: 0.4rem;
    margin-top: 20px;
    margin-left: 10px;
    width: 160px;
 
}




.meal_right_top{
    color: #06c1ae;
    margin-left: 40px;
    
}
.big-price{
    color: #06c1ae;
    font-weight: 400;
    font-size: 0.4rem;
}
.small-price{
   
    font-size: 0.24rem;
    color: #999;
    text-decoration: line-through;
}


.order-btn {
    padding: .08rem .14rem;
    width: auto;
    font-size: 0.32rem;
    border-radius: .04rem;
    color:white;
    background-color: #f90;
     margin-left: 40px;
}

    

</style>